<template>
  <view id="main">
    <!-- 顶部搜索框 -->
    <zy-topBar searchwidth="90%" scarchBottom showBack v-model="searchParam" @search="search" title="产生登记"
      paddingTop="50" height="40">
      <template #right>
        <view @tap="goAdd" class="top_right">
          新增
        </view>
      </template>
    </zy-topBar>
    <zy-tab :scrollable="true" lineColor="#0077FF" :activeStyle="{
      fontWeight: 'bold',
      transform: 'scale(1.3)',
      color: '#0077FF',
    }" lineWidth="120rpx" @click-tab="changeTab" v-model="current" :data="list"></zy-tab>
    <view class="content">
      <scroll-view scroll-y>
        <view>
          <view v-for="item in cerrentList" @tap="showDetail(item)" class="item card">
            <view class="title fs_17 color_black">
              {{ item.id }}
            </view>
            <view class="body">
              <view class="left">
                <view class="body_item flex">
                  <view class="label">废物名称</view>
                  <view class="value">{{ item.name }}</view>
                </view>
                <view class="body_item flex">
                  <view class="label">废物代码</view>
                  <view class="value">{{ item.code }}</view>
                </view>
                <view class="body_item flex">
                  <view class="label">库存状态</view>
                  <view class="value">{{ item.status }}</view>
                </view>
                <view class="body_item flex">
                  <view class="label">产生时间</view>
                  <view class="value">{{ item.regTime }}</view>
                </view>
              </view>
              <view v-if="current == '0'" class="right">
                <image v-if="item.print == '0'" src="@/static/img/printed.png" />
                <image v-else src="@/static/img/to_be_printed.png" />
              </view>
              <view v-else class="right">
                <image src="@/static/img/void.png" />
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import ZyBtn from "@/components/zy-btn/zy-btn.vue";
import { useRegStore } from "@/stores/modules/reg/reg";
const regStore = useRegStore();
const list = [
  { value: "0", name: "正常" },
  { value: "1", name: "已作废" }
];
const goAdd = () => {
  uni.navigateTo({
    url: "/pages/index/reg/addreg/addreg",
  });
};

// 顶部搜索框
const searchParam = ref("");
const search = (val: string) => {
  console.log(val);
};
//跳转到详情页
const showDetail = (item: any) => {
  uni.navigateTo({
    url: `/pages/index/reg/details/details?data=${JSON.stringify(item)}`,
  });
};
// tab切换
const current = ref("0"); // 当前tab索引
const cerrentList = ref(regStore.tableDataList);
onMounted(() => {
});
const changeTab = async (e: any) => {
  console.log(e);
  switch (e.value) {
    case "1":
      break;
    case "2":
      break;
    default:
      break;
  }
};
</script>

<style lang="scss" scoped>
scroll-view {
  height: calc(100vh - 148px);
  padding-bottom: 10px;

  .item {
    width: 92%;
    margin: 20px auto;

    .title {
      word-break: break-all;
    }

    .body {
      margin: 10px 0;
      position: relative;

      .right {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);

        image {
          width: 60px;
          height: 60px;
        }
      }

      .body_item {
        font-size: 14px;
        margin-bottom: 10px;

        .label {
          margin-right: 10px;
          color: #7C8190;
          white-space: nowrap;
        }

        .value {
          color: #1D2541;
        }

      }
    }
  }
}
</style>
